<template>
  <div>
    <!-- 个人 -->
    <div class="hd-center">
      <div class="hd-container" v-if="loginStatus">
        <!-- 头像 昵称 -->
        <img
          class="con-pic"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F42%2Fb3%2F07%2F42b30724fa786ad61edcf8d18765acbb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642936308&t=c04b17c1415b0b5a54fd5991475a3602"
          alt=""
        />
        <div class="con-username">
          <p>{{ userInfo.username }}</p>
          <span>Lv1 会员</span>
        </div>
        <p class="con-home">个人主页</p>
      </div>
      <div class="hd-container" v-if="!loginStatus">
        <!-- 头像 昵称 -->
        <img
          class="con-pic"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F9b4bd873a452acd279e911bfe27da5e149e6164125bf-s1DnoW_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642941203&t=41fdcedd34673016bb85fb8a1930ea2e"
          alt=""
        />
        <div class="con-username">
          <p><router-link to="/login">立即登录</router-link></p>
        </div>
        <p class="con-home">个人主页</p>
      </div>
      <!-- 想看 -->
      <ul class="hd-think">
        <li class="think-item" @click="jump">
          <p>想看</p>
          <span> {{ lenNum }}</span>
          <i class="iconfont icon-xiangyou1"></i>
        </li>
        <li class="think-item">
          <p>看过</p>
          <span>1</span>
          <i class="iconfont icon-xiangyou1"></i>
        </li>
      </ul>
      <!-- 我的评论 -->
      <div class="hd-commend">
        <p>查看更多</p>
      </div>
      <!-- 订单 -->
      <div class="hd-good">
        <p class="good-title">我的订单</p>
        <ul class="good-list">
          <li class="good-item">
            <i class="iconfont icon-dianying1"></i>
            <span>电影票</span>
          </li>
          <li class="good-item">
            <i class="iconfont icon-yinle"></i>
            <span>演出票</span>
          </li>
          <li class="good-item">
            <i class="iconfont icon-shipin1"></i>
            <span>在线观影</span>
          </li>
          <li class="good-item">
            <i class="iconfont icon-zhoubianyou"></i>
            <span>周边</span>
          </li>
        </ul>
      </div>
      <div class="hd-commend bg" v-if="!userInfo">
        <p @click="jumpregister">注册</p>
      </div>
      <div class="hd-commend bg" v-if="!userInfo">
        <p @click="jumplogin">登录</p>
      </div>
      <div class="hd-commend bg" v-if="loginStatus">
        <p @click="loginOut">退出登录</p>
      </div>
    </div>
    <!-- 底部 -->
    <comp-footer></comp-footer>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import CompFooter from "../components/comp-footer.vue";

export default {
  name: "Center",
  data() {
    return {
      lenNum: 0,
      loginStatus: false,
    };
  },
  components: {
    CompFooter,
  },
  computed: {
    ...mapGetters(["userInfo", "allLikeid"]),
    thinkLen() {
      return this.lenNum == 0 ? "0" : this.lenNum;
    },
    // 获取vuex 中的值
  },
  // watch: {
  //   lenNum(value) {
  //     console.log("len----", value);
  //     // this.$forceUpdate();
  //   },
  // },
  methods: {
    ...mapMutations(["changeLoginOut"]),
    ...mapActions(["getLikeId"]),
    jump() {
      this.$router.push("/think");
    },
    jumplogin() {
      this.$router.push("/login");
    },
    jumpregister() {
      this.$router.push("/register");
    },
    loginOut() {
      this.lenNum = 0
      this.loginStatus = false;
      this.changeLoginOut();
    },
  },
  created() {
    if (localStorage.getItem("token") != null) {
      this.loginStatus = true;
      this.getLikeId();
      // debugger
      // if (this.$store.state.allLikeid.result != []) {
      //   this.lenNum = this.$store.state.allLikeid.result.length;
      // } else {
      //   this.lenNum = 0;
      // }
    }
  },
  mounted() {
    setTimeout(() => {
      if (this.$store.state.allLikeid != null) {
        this.lenNum = this.$store.state.allLikeid.result.length;
        // console.log(this.$store.state.allLikeid);
      }
    },500);
  },
};
</script>

<style lang="scss" scoped>
// 个人中心头部
.hd-center {
  width: 100%;
  height: 340px;
  background: linear-gradient(to top, #fef6f7, #e92839, #ed3737);

  // 头像 昵称
  .hd-container {
    width: 352px;
    height: 120px;
    padding-top: 38px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .con-pic {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .con-username {
      width: 52%;
      p {
        font-size: 22px;
        color: #fff;
        a {
          font-size: 22px;
          color: #fff;
        }
      }
      span {
        display: inline-block;
        width: 78px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        font-size: 14px;
        box-shadow: 0 0 1px rgb(255, 255, 255);
      }
    }
    .con-home {
      width: 72px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      font-size: 12px;
      color: #fff;
      box-shadow: 0 0 1px rgb(255, 152, 152);
    }
  }
  // 想看
  .hd-think {
    width: 352px;
    margin: 0 auto;
    height: 52px;
    display: flex;
    align-good-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    .think-item {
      width: 50%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      color: #fff;
      p {
        font-size: 16px;
      }
      span {
        display: inline-block;
        width: 50%;
        font-size: 16px;
      }
      i {
        font-size: 12px;
      }
    }
  }
  .hd-commend {
    width: 352px;
    height: 68px;
    margin: 16px auto;
    background: #fff;
    border-radius: 12px;
    p {
      font-size: 18px;
      line-height: 68px;
      text-align: center;
    }
  }
  // 我的订单
  .hd-good {
    width: 352px;
    margin: 0 auto;
    height: 130px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 3px #ccc;
    .good-title {
      padding-left: 20px;
      padding-top: 20px;
      padding-bottom: 7px;
      font-size: 18px;
    }
    .good-list {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .good-item {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        i {
          font-size: 30px;
          color: #ffcd2a;
        }
        span {
          font-size: 14px;
        }
      }
    }
  }
}
.bg {
  background: rgb(240, 240, 240) !important;
}
</style>